<template>
	<view class="login-container">
		<image :src="imgUrl + '/images/logohead.png'" class="background-img"></image>
		<view class="absolve-wrapper">
			<cu-custom bgColor="" class='text-white' :isBack="true">
				<block slot="backText">返回</block>
			</cu-custom>
			<!-- <view class="cuIcon-back text-white" style="margin-top: 5%; padding-left: 20rpx; " @click="gotoback">返回
			</view> -->
			<view class="logo">
				<image :src=" imgUrl +'/images/logocenter.png'" class="logo-img"></image>
			</view>
			<view class="text-title">学会分享,让世界温暖你我！</view>
			<view class="login-all-wrap" style="margin-top: 120rpx;">
				<view class="top-wrap">
					<button class="pass-login-btn" @click="chanloginType('pass')"
						:class="{currentLogin : (loginType == 'pass')}">密码登录</button>
					<button class="captcha-login-btn" @click="chanloginType('captcha')"
						:class="{currentLogin : (loginType == 'captcha')}">微信登录</button>
				</view>
				<view class="px-2 login-input-wrap">
					<!-- 密码登录 -->
					<template v-if="loginType == 'pass'">
						<view class="mb-2 solid-bottom">
							<input @input="username_input" type="text" placeholder-style="color:#C9C9C9"
								v-model="username" placeholder="请输入用户名" class="border-bottom p-2" />
						</view>
						<view class="verify-code-wrap mb-2 flex align-stretch solid-bottom">
							<input type="password" placeholder-style="color:#C9C9C9" v-model="password"
								:placeholder="placeholder" class="border-bottom p-2 flex-1" />
						</view>
					</template>
					<!-- 微信一键登录 -->
					<template v-if="loginType == 'captcha'">
						<view class="btn-login">
							<u-button type="primary" shape="circle" @click="wechatlogin">微信登录</u-button>
						</view>
					</template>
				</view>

				<view class="login-btn-wrap py-2 px-2" v-if="loginType == 'pass'">
					<button class="login-btn bg-main text-white" style="border-radius: 50rpx; border: 0;" type="primary"
						:enabled="false" :class="{ opatity: enabled}" @click="submit">
						登录
					</button>

					<!-- <navigator v-show="isForgetShow" class="forget-pass" url="/pages/user/forget-password/forget-password">{{foretPass}}</navigator> -->
					<view style="height: 30rpx;"></view>

				</view>
				<!-- 微信登录 -->
				<view class="orther-login-wrap" v-if="loginType == 'pass'">
					<!-- <view class="t-f">————— 第三方账号登录 —————</view> -->
					<view class="loginType">
						<view class="wechat-box item">
							<view class="icon" @click="wechatlogin" open-type="getUserInfo" lang="zh_CN"
								@getuserinfo="login_weixin">
								<u-icon size="70" name="weixin-fill" color="rgb(83,194,64)"></u-icon>
							</view>
							微信
						</view>
					</view>
					<!-- 注册、忘记密码 -->
					<view class="agreenment" v-if="loginType == 'pass'">
						<!-- <navigator open-type="navigate" url="/pages/user/forget-password/forget-password">忘记密码
							</navigator> -->
						<!-- <navigator url="forget" open-type="navigate">忘记密码</navigator> -->
						<navigator url="/pages/user/register/register" open-type="navigate">注册账户</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import uniStatusBar from '@/components/uni-ui/uni-status-bar/uni-status-bar.vue';
	import $R from '@/common/free-lib/request.js'
	import $U from '@/common/free-lib/util.js';
	const app = getApp();
	export default {
		components: {
			// uniStatusBar,

		},
		data() {
			return {
				imgUrl: this.$site.img_url,
				// SessionKey: '',
				// OpenId: '',
				list: [{
					name: '《用户服务协议》和《隐私保护政策》',
					checked: false,
					disabled: false
				}],
				nickName: null,
				avatarUrl: null,
				isCanUse: uni.getStorageSync('isCanUse') || true, //默认为true
				domain: this.$H.domain,
				agree: false,
				iswechat: 1,
				status: "",
				login_by_wx: false,
				login_by_qq: false,
				username: "",
				usernameFlag: "",
				password: "",
				phone: "",
				code: "",
				codeTime: 0,
				loginType: "",
				placeholder: "请输入验证码",
				get_captcha_txt: "",
				foretPass: "",
				isForgetShow: false,
				smsType: 0, //获取验证码类型 0 登录 1 注册 2忘记密码
				sign: '', //加密后的签名串
				jumpPage: '',
				keyword: '',
				unionid: '',
				nickName: '',
				avatar: '',
				canshowcode: false,
				// shareCover: "",
				jsCode: '',
				openid: '',
				session_key: ''
			};
		},
		onLoad() {
			let {
				statusBarHeight
			} = uni.getSystemInfoSync();
			// this.getSysInfo();
			this.loginType = 'pass';
			this.placeholder = "请输入密码";
			this.get_captcha_txt = '';
			this.statusBarHeight = statusBarHeight;
			this.getWxCode()
		},
		computed: {
			enabled: function() {
				if (this.username == '' || this.password == '') {
					return true;
				}
				return false;
			},
		},
		methods: {
			gotoback() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 返回个人中心页
			back() {
				uni.reLaunch({
					url: "../my/my"
				});
			},
			//注册
			register() {
				uni.navigateTo({
					url: "./register/register"
				})
			},
			// 切换登录
			chanloginType(type) {
				if (type == 'captcha') {
					this.loginType = 'captcha';
					this.placeholder = '请输入验证码';
					this.get_captcha_txt = "获取验证码";
					this.foretPass = '';
					this.isForgetShow = false;
				} else if (type == 'pass') {
					this.loginType = 'pass';
					this.placeholder = "请输入密码";
					this.get_captcha_txt = '';
					this.foretPass = '忘记密码';
					this.isForgetShow = true;
				}
			},
			//账号输入
			username_input(event) {
				if (event.detail.value.length == 11) {
					this.canshowcode = true;
				} else {
					this.canshowcode = false;
				}
			},

			// getSysInfo() {
			// 	this.$H.get("/system/miniConfig").then(res => {
			// 		this.shareCover = res.result.intro;
			// 	})
			// },
			//获取微信临时凭证code
			getWxCode() {
				let that = this
				wx.login({
					success: function(res) {
						wx.request({
							url: 'https://huangyuze.top/openid',
							// url: 'http://127.0.0.1:7001/openid',
							data: {
								code: res.code
							},
							success: (loginres) => {
								console.log('9555556666', loginres)
								that.session_key = loginres.data.session_key
								that.openid = loginres.data.openid
								console.log('---------------------', that.session_key)
							}
				  })
					},
					fail(err) {
						console.log('登录失败！' + res.errMsg)
					}
				})
			},
			//小程序 手机号码一键获取 解密 然后直接登录了
			onGetPhoneNumber(e) {
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") {

				} else {
					//走后端api
					uni.showLoading({
						title: '登录中~',
						mask: true
					})
					console.log('888888888888', e);
					uni.request({
						url: 'http://huangyuze.top/phonelogin', //演示地址，请以你的后端接口为准  
						method: 'POST',
						data: {
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData,
							session_key: this.session_key,
							openid: this.openid
						},
						success: (res) => {
							console.log(res, '3333333333333') //res.data 即为后端返回的解密数据  
						}
					});
				}
			},
			//微信登录
			async wechatlogin() {
				uni.showLoading({
					title: '登录中...',
					mask: false
				});

				let that = this;

				// let loginCode = await this.getLoginCode();
				let userInfo = await this.getUserProfile();

				this.$C.post('/wxlogin', {
					session_key: this.session_key,
					openid: this.openid,
					encryptedData: userInfo.encryptedData,
					iv: userInfo.iv,
					token: false
				}).then(res => {
					console.log('res1111111111111', res);
					this.$store.dispatch('login', res)
					uni.showToast({
						title: '登录成功',
						icon: 'none',
						duration: 2000
					});
					setTimeout(function() {
						uni.reLaunch({
							url: '../index/index'
						});
					}, 200);
					uni.hideLoading();
				})
			},
			//获取用户信息
			getUserProfile(e) {
				return new Promise((resolve, reject) => {

					wx.getUserProfile({
						lang: 'zh_CN',
						desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						success: res => {
							resolve(res);
							console.log('123456', res);
						},
						fail: err => {
							reject(err)
							uni.hideLoading()
						}
					});
				});
			},
			//获取微信code
			getLoginCode() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							resolve(loginRes.code);
						}
					});
				});
			},

			// 登录提交
			submit() {
				const data = {
					username: this.username,
					password: this.password,
				};
				$R.post('/login', data, {
					token: false
				}).then(res => {
					console.log('res', res);
					this.$store.dispatch('login', res)
					uni.showToast({
						title: '登录成功',
						icon: 'none',
						duration: 2000
					});
					setTimeout(function() {
						uni.reLaunch({
							url: '../index/index'
						});
					}, 200);
				})


			}
		}
	}
</script>

<style lang="scss">
	.wechat-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-login {
		margin: 40rpx 0;
	}

	.txt1 {
		margin-bottom: 10rpx;
	}

	.txt2 {
		color: #999;
		margin-bottom: 50rpx;
	}

	.login-container {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;

		// background: url(../../static/loginBg.png) no-repeat;
		// background-size: contain;
		.absolve-wrapper {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.background-img {
			width: 100%;
			height: 100%;
		}

		.logo {
			text-align: center;

			// margin-top: 5%;
			.logo-img {
				width: 100px;
				height: 100px;
			}
		}

		.text-title {
			font-size: 38rpx;
			// margin-top: 10rpx;
			text-align: center;
			color: #fffefe;
		}

		.login-main {
			box-sizing: border-box;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 10%;
			right: 10%;

			.input-wrapper {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				padding-bottom: 30rpx;
				border-bottom: 1px solid rgb(242, 242, 242);
				position: relative;

				.icon {
					margin-right: 10px;
					font-size: 16px;
				}

				.eye {
					float: right;
					position: absolute;
					right: 5px;
					font-size: 16px;
				}
			}

			.login-button {
				width: 100%;
				color: #fff;
				background-image: linear-gradient(to right, #ffa6b6, #ff7c93);
				letter-spacing: 2px;
				height: 45px;
				margin-top: 75rpx !important;
			}
		}

		.other-login {
			position: absolute;
			bottom: 5%;
			left: 10%;
			right: 10%;

			.other-text {
				text-align: center;
				color: rgba(0, 0, 0, 0.4);
				font-size: 28rpx;
				position: relative;

				&::before,
				&::after {
					position: absolute;
					background: rgba(0, 0, 0, 0.15);
					content: '';
					height: 1px;
					top: 50%;
					width: 100px;
				}

				&::before {
					left: 5px;
				}

				&::after {
					right: 5px;
				}
			}

			.login-list {
				margin-top: 15px;
				display: flex;
				justify-content: center;
				align-items: center;

				.other-item {
					flex: 1;
					font-size: 40px;
					text-align: center;

					&.icon-weixin {
						color: #17d874;
					}

					&.icon-qq {
						color: #32d6f5;
					}

					&.icon-weibo {
						color: rgb(234, 93, 92);
					}

				}
			}
		}

		/deep/ {
			.input-placeholder {
				color: rgb(194, 194, 194);
				font-size: 30rpx;
			}
		}
	}

	@import '@/common/scss/login.scss'
</style>
